<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>

    <style>
        .login {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
            width: 350px;
            margin: 50px auto;
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .formItem {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        #username,
        #password {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .btn {
            display: flex;
            justify-content: space-around;
        }

        .btn_submit,
        .btn_reset {
            width: 70px;
            height: 40px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            background-color: #4caf50;
        }

        .btn_reset {
            background-color: #f44336;
        }

        .usernameEmpty,
        .usernameInvalid,
        .passwordEmpty {
            color: red;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

        .passwordStrength {
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

        .weak {
            color: red;
        }

        .medium {
            color: orange;
        }

        .strong {
            color: green;
        }
    </style>

</head>

<body>
    <div class="login">
        <h2>用户登录</h2>
        <form class="loginForm">
            <div class="formItem">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名" autocomplete="off">
                <span class="usernameEmpty">用户名不能为空</span>
                <span class="usernameInvalid">用户名不能包含特殊字符</span>
            </div>
            <div class="formItem">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码">
                <span class="passwordEmpty">密码不能为空</span>
                <span class="passwordStrength"></span>
            </div>
            <div class="btn">
                <button class="btn_submit">登录</button>
                <button class="btn_reset">重置</button>
            </div>
        </form>
    </div>

</body>
<script>
    document.querySelector('.btn_submit').addEventListener('click', function (e) {
        // 阻止表单默认提交行为
        e.preventDefault();

        let username = document.querySelector('#username').value.trim();
        let password = document.querySelector('#password').value.trim();

        document.querySelector('.usernameEmpty').style.display = 'none';
        document.querySelector('.usernameInvalid').style.display = 'none';
        document.querySelector('.passwordEmpty').style.display = 'none';
        document.querySelector('.passwordStrength').style.display = 'none';

        let isValid = true;

        if (username == '') {
            document.querySelector('.usernameEmpty').style.display = 'block';
            isValid = false;
        } else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(username)) {
            document.querySelector('.usernameInvalid').style.display = 'block';
            isValid = false;
        }

        if (password == '') {
            document.querySelector('.passwordEmpty').style.display = 'block';
            isValid = false;
        }

        if (isValid) {
            let passwordStrength = checkPasswordStrength(password);
            if (passwordStrength == 'weak') {
                alert('密码强度不足，请使用中等或强密码');
                return;
            }
            alert('登录成功！');
        }
    });

    document.querySelector('.btn_reset').addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector('#username').value = '';
        document.querySelector('#password').value = '';
    });

    document.querySelector('#username').addEventListener('input', function () {
        if (this.value.trim() != '') {
            document.querySelector('.usernameEmpty').style.display = 'none';
            document.querySelector('.usernameInvalid').style.display = 'none';
        }
    });

    document.querySelector('#password').addEventListener('input', function () {
        let password = this.value;
        let strengthElement = document.querySelector('.passwordStrength');

        if (password != '') {
            document.querySelector('.passwordEmpty').style.display = 'none';
        }

        if (password == '') {
            strengthElement.style.display = 'none';
            return;
        }

        let strength = checkPasswordStrength(password);
        strengthElement.style.display = 'block';

        switch (strength) {
            case 'weak':
                strengthElement.innerHTML = '弱密码';
                strengthElement.className = 'passwordStrength weak';
                break;
            case 'medium':
                strengthElement.innerHTML = '中等密码';
                strengthElement.className = 'passwordStrength medium';
                break;
            case 'strong':
                strengthElement.innerHTML = '强密码';
                strengthElement.className = 'passwordStrength strong';
                break;
        }
    });

    // 密码强度检测函数
    function checkPasswordStrength(password) {
        // 弱密码：纯字母或纯数字
        let weakRegex = /^[a-zA-Z]+$|^[0-9]+$/;
        // 中等密码：字母+数字，至少6位
        let mediumRegex = /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{6,}$/;
        // 强密码：字母+数字+特殊字符，至少8位
        let strongRegex = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[^a-zA-Z0-9]).{8,}$/;

        if (strongRegex.test(password)) {
            return 'strong';
        } else if (mediumRegex.test(password)) {
            return 'medium';
        } else {
            return 'weak';
        }
    }
</script>

</html>